<template>
    <div class="tab-content">
        <div class="breeding-section">
            <div class="section-header">
                <h4>养殖信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain @click="openBreedingDialog">设置</el-button>
                </div>
            </div>
            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="4" animated />
            </div>
            <template v-else>
                <div class="info-grid">
                    <div class="info-row">
                        <span class="info-label">品种：</span>
                        <span class="info-value">{{ breedingInfo.breed }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">饲养天数：</span>
                        <span class="info-value">{{ breedingInfo.days }} 天</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">饲养负责人：</span>
                        <span class="info-value">{{ breedingInfo.manager }}</span>
                    </div>
                </div>
                <div class="info-grid right-grid">
                    <div class="info-row">
                        <span class="info-label">来源：</span>
                        <span class="info-value">{{ breedingInfo.source }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">饲料品牌：</span>
                        <span class="info-value">{{ breedingInfo.feedBrand }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">出栏日期：</span>
                        <span class="info-value">{{ formatDate(breedingInfo.exitDate) }}</span>
                    </div>
                </div>
            </template>
        </div>
        <div class="breeding-section">
            <div class="section-header">
                <h4>保健信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain @click="showAddHealthCareForm">新增行</el-button>
                </div>
            </div>
            <el-table :data="healthCareTableData" style="width: 100%" border stripe>
                <el-table-column prop="feedingDays" label="饲养天数" width="100" />
                <el-table-column prop="healthCareApproach" label="保健方式" />
                <el-table-column prop="healthCareMethod" label="保健方法" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="editHealthCare(scope.$index)">修改</el-button>
                        <el-button type="danger" size="small" link
                            @click="deleteHealthCare(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="empty-data">
                        <p>暂无保健信息数据</p>
                    </div>
                </template>
            </el-table>
            <div class="add-row-section" v-show="showHealthCareForm">
                <div class="add-row-form">
                    <el-input v-model="newHealthCare.days" placeholder="饲养天数" class="healthcare-input"
                        :class="{ 'error': healthCareErrors.days }" @blur="validateHealthCareField('days')" />
                    <el-input v-model="newHealthCare.method" placeholder="保健方式" class="healthcare-input"
                        :class="{ 'error': healthCareErrors.method }" @blur="validateHealthCareField('method')" />
                    <el-input v-model="newHealthCare.approach" placeholder="保健方法" class="healthcare-input"
                        :class="{ 'error': healthCareErrors.approach }" @blur="validateHealthCareField('approach')" />
                    <div class="form-actions">
                        <el-button type="primary" size="small" @click="saveHealthCare">
                            {{ isEditMode ? '更新' : '保存' }}
                        </el-button>
                        <el-button type="info" size="small" @click="cancelAddHealthCare">取消</el-button>
                    </div>
                </div>
                <div class="form-errors" v-if="hasHealthCareErrors">
                    <div v-if="healthCareErrors.days" class="error-message">{{ healthCareErrors.days }}</div>
                    <div v-if="healthCareErrors.method" class="error-message">{{ healthCareErrors.method }}</div>
                    <div v-if="healthCareErrors.approach" class="error-message">{{ healthCareErrors.approach }}</div>
                </div>
            </div>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>动检证</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain @click="showImageUpload('动检证')">上传图片</el-button>
                </div>
            </div>
            <div class="certificate-container">
                <div class="certificate-images">
                    <div v-for="image in animalInspectionImages" :key="image.uid" class="certificate-image">
                        <img :src="image.url" :alt="'动检证'" class="image-item" />
                        <div class="image-overlay">
                            <el-button type="danger" size="small" circle @click="deleteImage(image, '动检证')">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                    <div v-if="animalInspectionImages.length === 0" class="certificate-image">
                        <div class="placeholder-image">暂无动检证图片</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="breeding-section">
            <div class="section-header">
                <h4>企业信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain>设置</el-button>
                </div>
            </div>
            <div class="company-info">
                <div class="info-row">
                    <span class="info-label">养殖场：</span>
                    <span class="info-value">四川绿特养殖基地</span>
                </div>
                <div class="info-row">
                    <span class="info-label">养殖数量：</span>
                    <span class="info-value">3200 只</span>
                </div>
                <div class="info-row">
                    <span class="info-label">负责人：</span>
                    <span class="info-value">X总</span>
                </div>
            </div>
        </div>
        <div class="breeding-section">
            <div class="section-header">
                <h4>企业照片</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain @click="showImageUpload('企业照片')">上传图片</el-button>
                </div>
            </div>
            <div class="company-images">
                <div class="image-grid">
                    <div v-for="image in companyImages" :key="image.uid" class="company-image">
                        <img :src="image.url" :alt="'企业照片'" class="image-item" />
                        <div class="image-overlay">
                            <el-button type="danger" size="small" circle @click="deleteImage(image, '企业照片')">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                    <div v-if="companyImages.length === 0" class="company-image">
                        <div class="placeholder-image">暂无企业照片</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 养殖信息设置对话框 -->
        <el-dialog v-model="breedingDialogVisible" title="养殖信息" width="500px" :before-close="handleClose"
            append-to-body>
            <div class="breeding-form">
                <el-form :model="breedingForm" label-width="100px" :rules="rules" ref="formRef">
                    <el-form-item label="品种：" prop="breed">
                        <el-input v-model="breedingForm.breed" placeholder="请输入品种"></el-input>
                    </el-form-item>
                    <el-form-item label="来源：" prop="source">
                        <el-input v-model="breedingForm.source" placeholder="请输入来源"></el-input>
                    </el-form-item>
                    <el-form-item label="饲养天数：" prop="days">
                        <el-input v-model="breedingForm.days" placeholder="请输入饲养天数"></el-input>
                    </el-form-item>
                    <el-form-item label="饲料品牌：" prop="feedBrand">
                        <el-input v-model="breedingForm.feedBrand" placeholder="请输入饲料品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="饲养负责人：" prop="manager">
                        <el-input v-model="breedingForm.manager" placeholder="请输入饲养负责人"></el-input>
                    </el-form-item>
                    <el-form-item label="出栏日期：" prop="exitDate">
                        <el-date-picker v-model="breedingForm.exitDate" type="date" placeholder="选择日期"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 图片上传对话框 -->
        <el-dialog v-model="imageDialogVisible" :title="`上传${currentImageCategory}`" width="600px" append-to-body>
            <div class="upload-section">
                <el-upload :action="getMultipleUploadUrl" :headers="uploadHeaders" :file-list="uploadFileList"
                    :before-upload="beforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError"
                    multiple list-type="picture-card" :limit="10">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过5MB，最多10张
                        </div>
                    </template>
                </el-upload>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="imageDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmImageUpload">完成上传</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { breedingService, type BreedingInfoResponseDto } from '@/http/breedingService'
import { healthCareService, type AddHealthCareInfoCommand, type UpdateHealthCareInfoCommand, type HealthCareInfoDto } from '@/http/healthCareService'
import { imageService } from '@/http/imageService'

// 接收父组件传递的溯源批次信息
const props = defineProps<{
    productionBatch: string
}>()
// 加载状态
const loading = ref(true)
// 养殖信息数据
const breedingInfo = reactive({
    breedingId: '',
    breed: '',
    source: '',
    days: '',
    feedBrand: '',
    manager: '',
    exitDate: ''
})
// 养殖信息对话框可见性
const breedingDialogVisible = ref(false)
// 表单引用
const formRef = ref<FormInstance>()
// 表单数据
const breedingForm = reactive({
    breedingId: '',
    breed: '',
    source: '',
    days: '',
    feedBrand: '',
    manager: '',
    exitDate: ''
})
// 表单校验规则
const rules = reactive<FormRules>({
    breed: [{ required: true, message: '请输入品种', trigger: 'blur' }],
    source: [{ required: true, message: '请输入来源', trigger: 'blur' }],
    days: [
        { required: true, message: '请输入饲养天数', trigger: 'blur' },
        { pattern: /^\d+$/, message: '饲养天数必须为数字', trigger: 'blur' }
    ],
    feedBrand: [{ required: true, message: '请输入饲料品牌', trigger: 'blur' }],
    manager: [{ required: true, message: '请输入饲养负责人', trigger: 'blur' }],
    exitDate: [{ required: true, message: '请选择出栏日期', trigger: 'change' }]
})
// 保健信息表格数据
const healthCareTableData = ref<HealthCareInfoDto[]>([])
// 新增保健信息表单数据
const newHealthCare = reactive({
    days: '',
    method: '',
    approach: ''
})
// 保健信息表单错误
const healthCareErrors = reactive({
    days: '',
    method: '',
    approach: ''
})

// 是否显示新增保健信息表单
const showHealthCareForm = ref(false)

// 当前编辑的保健信息ID
const editingHealthCareId = ref<string>('')

// 是否处于编辑模式
const isEditMode = ref(false)

// 图片相关
const imageDialogVisible = ref(false)
const currentImageCategory = ref('动检证') // 当前图片类型
const imageList = ref<{ url: string; uid: string }[]>([])
const uploadFileList = ref<any[]>([])

// 不同类型的图片数据
const animalInspectionImages = ref<{ url: string; uid: string }[]>([]) // 动检证
const companyImages = ref<{ url: string; uid: string }[]>([]) // 企业照片

// 显示新增保健信息表单
const showAddHealthCareForm = () => {
    isEditMode.value = false
    showHealthCareForm.value = true
    resetHealthCareForm()
}

// 验证保健信息字段
const validateHealthCareField = (field: 'days' | 'method' | 'approach') => {
    let errorMessage = ''
    const fieldLabels = {
        days: '饲养天数',
        method: '保健方式',
        approach: '保健方法'
    }

    if (!newHealthCare[field].trim()) {
        errorMessage = `${fieldLabels[field]}不能为空`
    } else if (field === 'days' && !/^\d+$/.test(newHealthCare[field])) {
        errorMessage = '饲养天数必须为数字'
    }

    healthCareErrors[field] = errorMessage
    return !errorMessage
}

// 检查是否有保健信息表单错误
const hasHealthCareErrors = computed(() => {
    return Object.values(healthCareErrors).some(msg => msg !== '')
})



// 保存保健信息
const saveHealthCare = async () => {
    // 验证所有字段
    const isValidDays = validateHealthCareField('days')
    const isValidMethod = validateHealthCareField('method')
    const isValidApproach = validateHealthCareField('approach')

    if (!isValidDays || !isValidMethod || !isValidApproach) {
        ElMessage.error('请填写完整且正确的保健信息')
        return
    }

    try {
        let result

        if (isEditMode.value) {
            // 编辑模式 - 调用更新API
            const updateData: UpdateHealthCareInfoCommand = {
                healthCareId: editingHealthCareId.value,
                feedingDays: newHealthCare.days,
                healthCareMethod: newHealthCare.approach,  // 保健方法 → healthCareMethod
                healthCareApproach: newHealthCare.method,  // 保健方式 → healthCareApproach
                productionBatch: props.productionBatch
            }
            result = await healthCareService.updateHealthCareInfo(updateData)
        } else {
            // 新增模式 - 调用添加API
            const addData: AddHealthCareInfoCommand = {
                feedingDays: newHealthCare.days,
                healthCareMethod: newHealthCare.approach,  // 保健方法 → healthCareMethod
                healthCareApproach: newHealthCare.method,  // 保健方式 → healthCareApproach
                productionBatch: props.productionBatch
            }
            result = await healthCareService.addHealthCareInfo(addData)
        }

        if (result.success) {
            // 重新获取保健信息列表
            await fetchHealthCareInfo()

            ElMessage.success(isEditMode.value ? '保健信息修改成功' : '保健信息添加成功')
            showHealthCareForm.value = false

            // 重置表单状态
            resetHealthCareForm()
        } else {
            ElMessage.error(result.message || (isEditMode.value ? '修改保健信息失败' : '添加保健信息失败'))
        }
    } catch (error) {
        console.error('保存保健信息失败:', error)
        ElMessage.error('保存保健信息失败')
    }
}

// 重置保健信息表单
const resetHealthCareForm = () => {
    newHealthCare.days = ''
    newHealthCare.method = ''
    newHealthCare.approach = ''
    Object.assign(healthCareErrors, { days: '', method: '', approach: '' })
    editingHealthCareId.value = ''
    isEditMode.value = false
}

// 取消新增/编辑保健信息
const cancelAddHealthCare = () => {
    showHealthCareForm.value = false
    resetHealthCareForm()
}

// 获取保健信息列表
const fetchHealthCareInfo = async () => {
    try {
        const result = await healthCareService.getHealthCareInfoByBatch(props.productionBatch)
        if (result.success && result.data) {
            healthCareTableData.value.push(result.data)
            //
        } else {
            healthCareTableData.value = []
            ElMessage.error(result.message || '获取保健信息失败')
        }
    } catch (error) {
        console.error('获取保健信息失败:', error)
        healthCareTableData.value = []
        ElMessage.error('获取保健信息失败')
    }
}

// 编辑保健信息
const editHealthCare = (index: number) => {
    const row = healthCareTableData.value[index]
    newHealthCare.days = row.feedingDays
    newHealthCare.method = row.healthCareApproach   // API的healthCareApproach → 前端的保健方式
    newHealthCare.approach = row.healthCareMethod   // API的healthCareMethod → 前端的保健方法
    editingHealthCareId.value = row.healthCareId
    isEditMode.value = true
    showHealthCareForm.value = true
    Object.assign(healthCareErrors, { days: '', method: '', approach: '' })
}

// 删除保健信息
const deleteHealthCare = async (index: number) => {
    const row = healthCareTableData.value[index]

    try {
        const result = await healthCareService.deleteHealthCareInfo(row.healthCareId)
        if (result.success) {
            ElMessage.success('保健信息删除成功')
            // 重新获取列表
            await fetchHealthCareInfo()
        } else {
            ElMessage.error(result.message || '删除保健信息失败')
        }
    } catch (error) {
        console.error('删除保健信息失败:', error)
        ElMessage.error('删除保健信息失败')
    }
}

// 打开养殖信息设置对话框
const openBreedingDialog = () => {
    breedingDialogVisible.value = true
}

// 关闭对话框
const handleClose = () => {
    breedingDialogVisible.value = false
    resetForm()
}

// 重置表单
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 保存养殖信息
const handleSave = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // 准备保存的数据
                const saveData = {
                    breedingId: breedingForm.breedingId,
                    productionBatch: props.productionBatch,
                    breed: breedingForm.breed,
                    source: breedingForm.source,
                    feedingDays: breedingForm.days,
                    brand: breedingForm.feedBrand,
                    breederInCharge: breedingForm.manager
                }
                // 调用API保存数据
                const result = await breedingService.saveBreedingInfo(saveData)
                if (result.success) {
                    // 更新本地数据
                    Object.assign(breedingInfo, breedingForm)
                    ElMessage.success('养殖信息保存成功')
                    breedingDialogVisible.value = false
                    // 重新获取最新数据
                    fetchBreedingInfo()
                } else {
                    ElMessage.error(result.message || '保存养殖信息失败')
                }
            } catch (error) {
                console.error('保存养殖信息失败:', error)
                ElMessage.error('保存养殖信息失败')
            }
        }
    })
}

// 格式化日期
const formatDate = (dateString: string) => {
    if (!dateString) return ''

    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()

    return `${year}年${month}月${day}日`
}

// 获取养殖信息
const fetchBreedingInfo = async () => {
    try {
        loading.value = true
        const result = await breedingService.getBreedingInfoByBatch(props.productionBatch)
        if (result.success && result.data) {
            // 映射API返回的数据到组件数据模型
            breedingInfo.breedingId = result.data.breedingId
            breedingInfo.breed = result.data.breed
            breedingInfo.source = result.data.source
            breedingInfo.days = result.data.feedingDays
            breedingInfo.feedBrand = result.data.brand
            breedingInfo.manager = result.data.breederInCharge
            breedingInfo.exitDate = result.data.createdTime

            // 同时更新表单数据，以便在打开对话框时能正确回显
            breedingForm.breedingId = result.data.breedingId
            breedingForm.breed = result.data.breed
            breedingForm.source = result.data.source
            breedingForm.days = result.data.feedingDays
            breedingForm.feedBrand = result.data.brand
            breedingForm.manager = result.data.breederInCharge
            breedingForm.exitDate = result.data.createdTime

            // 打印返回数据，方便调试
            console.log('获取养殖信息成功:', result.data)
        } else {
            ElMessage.error(result.message || '获取养殖信息失败')
        }
    } catch (error) {
        console.error('获取养殖信息失败:', error)
        ElMessage.error('获取养殖信息失败')
    } finally {
        loading.value = false
    }
}

// 图片上传相关方法
const uploadHeaders = imageService.getUploadHeaders()

// 获取多图片上传URL
const getMultipleUploadUrl = computed(() => {
    if (!props.productionBatch) {
        return imageService.getMultipleUploadUrl('traceability2212b')
    }
    return `${imageService.getMultipleUploadUrl('traceability2212b')}&productionBatch=${encodeURIComponent(props.productionBatch)}&imageCategory=${encodeURIComponent(currentImageCategory.value)}`
})

// 显示图片上传对话框
const showImageUpload = (category: string) => {
    currentImageCategory.value = category
    uploadFileList.value = []
    imageDialogVisible.value = true
}

// 上传前验证
const beforeUpload = (rawFile: File) => {
    const isJPGOrPNG = rawFile.type === 'image/jpeg' || rawFile.type === 'image/png'
    const isLt5M = rawFile.size / 1024 / 1024 < 5
    if (!isJPGOrPNG) {
        ElMessage.error('图片只能是 JPG/PNG 格式!')
    }
    if (!isLt5M) {
        ElMessage.error('图片大小不能超过 5MB!')
    }
    return isJPGOrPNG && isLt5M
}

// 上传成功处理
const handleUploadSuccess = (response: any, file: any, fileList: any[]) => {
    if (response.success) {
        ElMessage.success('图片上传成功')
    } else {
        ElMessage.error(response.message || '图片上传失败')
    }
}

// 上传错误处理
const handleUploadError = (err: any, file: any, fileList: any[]) => {
    ElMessage.error('图片上传失败，请稍后再试')
}

// 确认上传
const confirmImageUpload = () => {
    imageDialogVisible.value = false
    // 刷新对应类型的图片
    fetchImagesByCategory(currentImageCategory.value)
    ElMessage.success('图片上传成功')
}

// 根据类型获取图片
const fetchImagesByCategory = async (category: string) => {
    if (!props.productionBatch) return

    try {
        const response = await imageService.queryImages({
            ImageCategory: category,
            ProductionBatch: props.productionBatch
        })

        if (response.success && response.data) {
            const images = response.data.map(img => ({
                url: img.imageUrl,
                uid: img.imageId
            }))

            // 根据类型存储到对应的数组中
            if (category === '动检证') {
                animalInspectionImages.value = images
            } else if (category === '企业照片') {
                companyImages.value = images
            }
        }
    } catch (error) {
        console.error(`获取${category}图片失败:`, error)
        ElMessage.error(`获取${category}图片失败，请稍后再试`)
    }
}

// 删除图片
const deleteImage = async (image: { uid: string, url: string }, category: string) => {
    try {
        const response = await imageService.deleteImage(image.uid)
        if (response.success) {
            // 从对应的图片数组中移除
            if (category === '动检证') {
                animalInspectionImages.value = animalInspectionImages.value.filter(item => item.uid !== image.uid)
            } else if (category === '企业照片') {
                companyImages.value = companyImages.value.filter(item => item.uid !== image.uid)
            }
            ElMessage.success('图片删除成功')
        } else {
            ElMessage.error(response.message || '图片删除失败')
        }
    } catch (error) {
        console.error('删除图片失败:', error)
        ElMessage.error('删除图片失败，请稍后再试')
    }
}

// 组件挂载时获取数据
onMounted(() => {
    fetchBreedingInfo()
    fetchHealthCareInfo()
    // 获取各类型图片
    fetchImagesByCategory('动检证')
    fetchImagesByCategory('企业照片')
})
</script>

<style scoped>
/* 组件的样式 */
.breeding-section {
    background-color: #f9fafc;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.breeding-section .section-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breeding-section h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

.breeding-section .section-actions {
    display: flex;
    gap: 10px;
}

.breeding-section .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.breeding-section .info-grid .info-row {
    margin-bottom: 0;
}

.breeding-section .right-grid {
    grid-template-columns: 1fr 1fr;
}

.add-row-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #dcdfe6;
}

.add-row-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.healthcare-input {
    width: 150px;
}

.healthcare-input.error {
    border-color: #f56c6c !important;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-left: 10px;
}

.form-errors {
    margin-top: 10px;
    color: #f56c6c;
    font-size: 12px;
}

.error-message {
    margin-top: 5px;
}

.breeding-section .certificate-container {
    margin-top: 20px;
}

.breeding-section .certificate-images {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.breeding-section .certificate-image {
    position: relative;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

.image-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.certificate-image:hover .image-overlay,
.company-image:hover .image-overlay {
    opacity: 1;
}

.breeding-section .add-image {
    flex-shrink: 0;
}

.breeding-section .add-button {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
}

.breeding-section .company-info {
    margin-top: 20px;
}

.breeding-section .company-info .info-row {
    margin-bottom: 10px;
}

.info-row {
    margin-bottom: 15px;
    display: flex;
}

.info-label {
    width: 120px;
    color: #666;
    font-weight: bold;
}

.info-value {
    color: #333;
}

.company-images .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.company-image {
    position: relative;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    overflow: hidden;
    width: 150px;
    height: 100px;
}

/* 对话框表单样式 */
.breeding-form {
    padding: 10px 0;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 加载状态样式 */
.loading-container {
    padding: 20px 0;
}

/* 占位符图片样式 */
.placeholder-image {
    width: 100%;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    border-radius: 4px;
}

/* 空数据样式 */
.empty-data {
    padding: 20px;
    text-align: center;
    color: #999;
}

.empty-data p {
    margin: 5px 0;
}
</style>